<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录页面</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/css/login.css">
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="login-container">
                <h2 class="login-header">登录</h2>
                <form action="/login" method="post">
                    <div class="form-group mb-3">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="输入用户名">
                    </div>
                    <div class="form-group mb-3">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="输入密码">
                    </div>
                    <div class="btn-container">
                        <button type="submit" class="btn btn-primary">登录</button>
                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
                                data-bs-target="#registerModal">注册
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- 注册模态框 -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="registerModalLabel" onclose="registerUser()">注册</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="register-form">
                    <div class="form-group mb-3">
                        <label for="register-username">用户名</label>
                        <input type="text" class="form-control" id="register-username" name="register-username"
                               placeholder="输入用户名">
                    </div>
                    <div class="form-group mb-3">
                        <label for="register-email">邮箱</label>
                        <input type="email" class="form-control" id="register-email" name="register-email"
                               placeholder="输入邮箱" required
                               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
                        <div class="invalid-feedback">请输入有效的电子邮箱地址。</div>
                    </div>
                    <div class="form-group mb-3">
                        <label for="register-password">密码</label>
                        <input type="password" class="form-control" id="register-password" name="register-password"
                               placeholder="输入密码">
                    </div>
                    <div class="form-group mb-3">
                        <label for="confirm-password">确认密码</label>
                        <input type="password" class="form-control" id="confirm-password" name="confirm-password"
                               placeholder="确认密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="registerUser()">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="/js/jquery3.7.1.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>没用到，
用于处理弹出框、下拉菜单等组件的定位和偏移-->
<script src="/js/bootstrap5.3.0.js"></script>
<script src="/js/axios.min.js"></script>
<!--验证-->
<script src="/js/login.js"></script></head>


</body>
</html>